<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-form-item label="消息标题" prop="messageTitle">
          <el-input
            v-model="queryParams.messageTitle"
            clearable
            placeholder="请输入消息标题"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="mt10">
      <el-tabs v-model="systemMessage" :stretch="true" style="height: 600px;margin:-10px" type="border-card"
               @tab-click="tabClick">
        <el-tab-pane v-for="dict in systemMessageTypeDict" :label="dict.dictLabel"
                     :name="dict.dictValue"
                     style="height: 100%;overflow-y: auto">
          <template #label>
            <el-badge :hidden="dict.messageCount <= 0" :offset=[10,0] :value="dict.messageCount" class="item">
              <span>{{ dict.dictLabel }}</span>
            </el-badge>
          </template>
          <template v-if="!messageList">
            <el-empty description="暂无数据" style="height: calc(100% - 30px)"/>
          </template>
          <template v-else>
            <el-collapse v-model="activeCollapse" accordion>
              <el-collapse-item v-for="(item,index) in messageList" :key="index" :name="index"
                                @click="oneMessageclick(item)">
                <template #title>
                  <el-tooltip
                    :content="'发布时间：'+item.sendTime+'<br/>发布人：'+ item.sendUserName"
                    class="box-item"
                    effect="dark"
                    placement="left"
                    raw-content
                  >

                    <div class="message-div" style="text-align: left; color: #0435ee; width: 100%;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;
                              overflow: hidden;"
                    ><span v-if="item.isReadOk ==='N'"
                           style="color: #ff0404">【未读】</span>
                      <span v-else
                            style="color: #02962d">【已读】</span>
                      <span style="color: #c45901">发布时间：{{ item.sendTime }} --- 发布人：{{ item.sendUserName }}</span>
                      {{
                        item.messageTitle
                      }}
                    </div>
                  </el-tooltip>
                </template>
                <div>
                  <span v-html="item.messageContent"></span>
                </div>
              </el-collapse-item>
            </el-collapse>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "SysUserMessage"
}
</script>

<script lang="ts" setup>
import {
  listSysUserMessage, listSysUserMessageMap, readOk
} from "@/api/system/sysUserMessage";

import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user.ts";

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('system_message_type', 'sys_yes_no'))


const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo: any = reactive(useUserStore.user.userInfo);
const {proxy} = getCurrentInstance() as any;

// 消息折叠组件数组
const activeCollapse = ref([])
const queryParamsRef = ref()
const queryParams = ref({
  isReadOk: "",
  messageTitle: ""
})
// 消息list
const messageList = ref<any>()
// 消息list 条数
const messageBadge = ref<number>(0)
const systemMessageTypeDict = ref<any>([])
const systemMessage = ref("1")


/** 查询用户-消息状态列表 */

// 查询消息
function getAllMessageList() {
  const param = {
    sysMessageType: systemMessage.value,
    designatedReviewer: userInfo.userId,
    orgId: userInfo.orgId,
    messageTitle: queryParams.value.messageTitle
  }
  listSysUserMessageMap(param).then((res: any) => {
    const data = res.data;
    messageList.value = data.sysUserMessageVos
    systemMessageTypeDict.value.forEach((item: any) => {
      item.messageCount = data[item.dictValue] || 0
    })
    messageBadge.value = data.allCount || 0
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  getAllMessageList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

function tabClick(obj: any) {
  activeCollapse.value = []
  const objThis = toRaw(obj)
  systemMessage.value = objThis.props.name
  getAllMessageList()
}


/**
 * 单个消息已读
 */
function oneMessageclick(item) {
  if (item.isReadOk === 'N') {
    const param = {
      sysMessageType: systemMessage.value,
      designatedReviewer: userInfo.userId,
      orgId: userInfo.orgId,
      sysUserMessageId: item.sysUserMessageId
    }
    readOk(param).then(() => {
      item.isReadOk = "Y"
    })
  }
}

function close() {
  queryParams.value.messageTitle = ""
  activeCollapse.value = []
}

systemMessageTypeDict.value = dictDataMap.value['system_message_type']
getAllMessageList();

defineExpose({
  getAllMessageList,
  close
})
</script>

<style scoped>
</style>
